<template>
    <div>
        <!-- 头部搜索板块 -->
        <div style="margin-top: 30px; margin-left: 30px;">
            <p style="display: inline-block; padding-left: 20px;">专家组名称：</p>
            <el-input v-model="profGroupName" placeholder="请输入专家组名称" style="width: 200px;" clearable @clear="initProfTeamData" @keydown.enter.native="initProfTeamData" />
            <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="initProfTeamData">搜索</el-button>
            <router-link :to="{name: 'ExpertTeamLibraryAdd'}">
                <el-button style="margin-left: 100px;" type="release" icon="el-icon-circle-plus-outline">添加小组</el-button>
            </router-link>
        </div>
        <!-- 中间表格板块 -->
        <div style="margin-top: 20px;">
            <el-table ref="table" :data="profTeamData" border style="width: 100%;">
                <el-table-column align="center" type="index" prop="groupId" label="专家组编号" width="100px" />
                <el-table-column align="center" prop="groupName" label="专家组名称" />
                <el-table-column align="center" prop="groupLeader" label="专家组组长" />
                <el-table-column align="center" prop="leaderPhone" label="组长联系电话" />
                <el-table-column align="center" prop="operation" label="操作" width="190">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px;" type="text" size="mini" @click="checkProfGroupDetails(scope.row)">查看详情</el-button>
                        <el-button style="padding: 3px;" type="primary" size="mini" @click="editProfGroupDetails(scope.$index, scope.row)">编辑</el-button>
                        <el-button style="padding: 3px;" type="danger" size="mini" @click="deleteProfGroup(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑专家组弹框部分 -->
        <el-dialog title="编辑专家组" :visible.sync="dialogVisible" width="30%" center>
            <div style="margin-top: 10px;">
                <el-tag>专家组名称</el-tag>
                <el-input v-model="profGroupDetails.groupName" clearable class="updateProfGroup" />
            </div>
            <div style="margin-top: 10px;">
                <el-tag>专家组组长名</el-tag>
                <el-input v-model.trim="profGroupDetails.groupLeader" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div style="margin-top: 10px;">
                <el-tag>组长联系电话</el-tag>
                <el-input v-model.trim="profGroupDetails.leaderPhone" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <span slot="footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="updateProfGroupInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'ExpertTeamLibraryIndex',
    data() {
        return {
            profGroupName: '',
            dialogVisible: false,
            profTeamData: [],
            profTeamDetailById: [],
            profGroupDetails: {
                groupName: '',
                leaderName: '',
                chargeName: ''
            }
        }
    },
    watch: {
        profGroupName(val) {
            if (val === '' || val === null) {
                this.initProfTeamData()
            }
        }
    },
    mounted() {
        this.initProfTeamData()
    },
    methods: {
        change() {
            this.$forceUpdate()
        },
        initProfTeamData() { // 初始获取所有专家组信息
            this.getRequest('/system/group/getAllProfGroupsInfo?profGroupName=' + this.profGroupName).then(resp => {
                if (resp) {
                    this.profTeamData = resp.data
                }
            })
        },
        checkProfGroupDetails(data) { // 查看专家组详情页面跳转
            this.$router.push({path: '/expert_team_library/details', query: data})
        },
        deleteProfGroup(index, data) { // 删除专家组信息
            this.$confirm('此操作将永久删除专家组[' + data.groupName + '],是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/group/delete/', data.groupId).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initProfTeamData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        editProfGroupDetails(index, data) { // 编辑专家组信息弹框显示
            Object.assign(this.profGroupDetails, data)
            this.dialogVisible = true
        },
        updateProfGroupInfo() { // 确认编辑更新专家组信息
            this.putRequest('/system/group/update', this.profGroupDetails).then(resp => {
                if (resp) {
                    this.initProfTeamData()
                    this.dialogVisible = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.updateProfGroup {
    width: 200px;
    margin-left: 8px;
}
.el-button--release {
    background-color: rgb(250, 136, 136);
    color: #f5f2f0;
}
</style>
